<template>
    <l-data-panel 
        :label="data.title"
        isApp
        >
        <l-echarts ref="main"></l-echarts>
    </l-data-panel>
</template>
<script>
export default {
    props: ['data','isPreview','isShow'],
    data () {
        return {
            option:{
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                xAxis: {
                    type: 'category',
                    data: []
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    data: [],
                    type: 'bar',
                    /*label: {
                        position: 'top',
                        show: true
                    },*/
                    showBackground: false,
                    backgroundStyle: {
                        color: ''
                    }
                }]
            },
            timer:null
        }
    },
    watch:{
        isShow(){
            setTimeout(() => {
                this.$refs.main.updateChart()
            }, 100);
        },
        data:{
            handler(){
                this.refresh()
            },
            deep: true
        }        
    },

    mounted(){
        this.refresh()
    },
    methods:{
        async getOption(){
            if(this.data.dataType == 'Y'){
                this.option.xAxis = {
                    type: 'category',
                    data: []
                }
                this.option.yAxis = {
                    type: 'value'
                }
            }
            else{
                this.option.xAxis = {
                    type: 'value'
                }
                this.option.yAxis = {
                    type: 'category',
                    data: []
                }
            }

            this.option.series.forEach(item => {
                item.showBackground = this.data.showBackground
                item.backgroundStyle.color = this.data.backgroundColor
            })

            // 加载数据
            if(this.data.dataCode){
                await this.lr_loadDataSourceData(this.data.dataCode,!!this.isPreview)
            }
           
            const data = this.lr_dataSourceData[this.data.dataCode] || []

            if(this.data.XKey && this.data.YKey){
                const xList = []
                const yList = []
                
                data.forEach(item=>{
                    xList.push(item[this.data.XKey])
                    yList.push(item[this.data.YKey])
                })

                if(this.data.dataType == 'Y'){
                    this.option.series[0].data = yList
                    this.option.xAxis.data = xList
                }
                else{
                    this.option.series[0].data = yList 
                    this.option.yAxis.data = xList
                }

            }

            return this.option
        },
        refresh(){
            if(this.timer == null){
                this.timer = setTimeout(async ()=>{
                    const option = await this.getOption()
                    this.$refs.main.updateChart(option)
                    this.timer = null
                },100)
            }
        }
    }
}
</script>

